import React from 'react'
import { StyleSheet, Image } from 'react-native'
import { TabNavigator } from 'react-navigation'
import Home from '../pages/Home'
import Todo from '../pages/Todo'
import Contacts from '../pages/Contacts'
import User from '../pages/User'
import styleVars from '../styles/_variables'

const styles = StyleSheet.create({
  icon: {
    top: 2,
    width: 26,
    height: 26
  }
})

const tabNavigatorConfigs = {
  tabBarPosition: 'bottom',
  swipeEnabled: false,
  tabBarOptions: {
    activeTintColor: styleVars.color.primary,
    inactiveTintColor: '#9a9a9a',
    showIcon: true,
    style: {
      backgroundColor: '#ffffff'
    },
    labelStyle: {
      fontSize: 12,
      marginTop: 2
    },
    iconStyle: {
      width: 51,
      height: 30
    },
    indicatorStyle: {
      backgroundColor: styleVars.color.primary,
      height: 0,
      borderRadius: 1
    }
  }
}

const RootTabNav = TabNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      title: '工作台',
      tabBarIcon: ({ focused, tintColor }) => {
        if (focused) {
          return (<Image
            source={require('../images/home_active.png')}
            style={[styles.icon]}
          />)
        } else {
          return (<Image
            source={require('../images/home.png')}
            style={[styles.icon]}
          />)
        }
      }
    }

  },
  Todo: {
    screen: Todo,
    navigationOptions: {
      title: '待办',
      tabBarIcon: ({ focused, tintColor }) => {
        if (focused) {
          return (<Image
            source={require('../images/todo_active.png')}
            style={[styles.icon]}
          />)
        } else {
          return (<Image
            source={require('../images/todo.png')}
            style={[styles.icon]}
          />)
        }
      }
    }
  },
  Contacts: {
    screen: Contacts,
    navigationOptions: {
      title: '通讯录',
      tabBarIcon: ({ focused, tintColor }) => {
        if (focused) {
          return (<Image
            source={require('../images/contacts_active.png')}
            style={[styles.icon]}
          />)
        } else {
          return (<Image
            source={require('../images/contacts.png')}
            style={[styles.icon]}
          />)
        }
      }
    }
  },
  User: {
    screen: User,
    navigationOptions: {
      title: '我的',
      tabBarIcon: ({ focused, tintColor }) => {
        if (focused) {
          return (<Image
            source={require('../images/user_active.png')}
            style={[styles.icon]}
          />)
        } else {
          return (<Image
            source={require('../images/user.png')}
            style={[styles.icon]}
          />)
        }
      }
    }
  }
}, tabNavigatorConfigs)

export default RootTabNav
